<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-lx-calendar"></i> 用户管理
        </el-breadcrumb-item>
        <el-breadcrumb-item>用户编辑</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <div class="form-box">
        <el-form ref="formRef" :rules="rules" :model="form.data" label-width="80px">
          <el-form-item label="用户名" prop="userName">
            <el-input v-model="form.data.userName" placeholder="列如信息工程学院_张三"></el-input>
          </el-form-item>
          <el-form-item label="账号" prop="loginName">
            <el-input v-model="form.data.loginName" placeholder="如：xxgcxy_xxxxx"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input v-model="form.data.password" type="password" disabled></el-input>
          </el-form-item>
          <el-form-item label="角色" prop="region">
            <!--            <el-select v-model="form.data.roleId" placeholder="请选择角色">-->
            <!--              <el-option key="1" label="管理员" value="1"></el-option>-->
            <!--              <el-option key="2" label="辅导员" value="2"></el-option>-->
            <!--              <el-option key="4" label="后勤部" value="4"></el-option>-->
            <!--            </el-select>-->
            <el-select v-model="form.data.roleId" placeholder="请选择角色">
              <el-option
                  v-for="item in roleList"
                  :key="item.sid"
                  :label="item.name"
                  :value="item.sid"
                  :disabled="item.name== '管理员'  ? true:false"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="所属学院" prop="collegeName">
            <el-select v-model="form.data.collegeId" placeholder="请选择学院">
              <el-option
                  v-for="item in collegeList"
                  :key="item.sid"
                  :label="item.collegeName"
                  :value="item.sid"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="onSubmit">提交</el-button>
            <el-button @click="onReset">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { reactive, ref } from "vue";
import { ElMessage } from "element-plus";
import request from "../../utils/request";
import { useRoute, useRouter } from "vue-router";
import { useStore } from "vuex";
export default {
  name: "AddUser",
  setup() {
    const router = useRouter();
    const route = useRoute();
    const store = useStore();
    const rules = {
      userName: [{ required: true, message: "请输入用户名", trigger: "blur" }],
    };
    const formRef = ref(null);
    var form = reactive({
      data: {
        sid: "",
        userName: "",
        loginName: "",
        password: "123456",
        roleId: "",
      },
    });
    const importVisible = ref(false)
    if (route.query.id) {
      importVisible.value = true
      request.get("/user/" + route.query.id).then((res) => {
        form.data = res.data;
      });
    }
    // 提交
    const onSubmit = () => {
      // 表单校验
      formRef.value.validate((valid) => {
        if (valid) {
          var method = form.data.sid === "" ? "POST" : "PUT";
          request({
            url: "/user",
            method: method,
            data: form.data,
          }).then((res) => {
            ElMessage.success("提交成功！");
            // 关闭当前页面的标签页;
            store.commit("closeCurrentTag", {
              $router: router,
              $route: route,
            });
            router.push("/admin/user");
          });
        } else {
          return false;
        }
      });
    };
    const roleList = ref([]);
    request.get("/role").then((res) => {
      roleList.value = res.data;
    });
    const collegeList = ref([]);
    request.get("/college").then((res) => {
      collegeList.value = res.data;
    });
    // 重置
    const onReset = () => {
      formRef.value.resetFields();
    };

    return {
      rules,
      formRef,
      form,
      roleList, importVisible, collegeList,
      onSubmit,
      onReset,
    };
  },
};
</script>